<h1 class="page-header">
    <small>编辑卡券</small>
</h1>
<div class="panel panel-inverse" data-sortable-id="form-stuff-1">
    <div class="panel-heading">
        <h4 class="panel-title"><#if (groupInfo.type == 'P')>编辑预存券<#elseif groupInfo.type == 'C'>编辑卡券<#else>编辑卡券</#if></h4>
    </div>
    <div class="panel-body">
        <form id="activityForm" name="activityForm" action="" method="post" class="form-horizontal">
            <input id="id" type="hidden" name="id" value="${couponInfo.id}">
            <input id="groupId" type="hidden" name="groupId" value="${groupInfo.id}">
            <input id="type" type="hidden" name="type" value="${groupInfo.type}">
            <div class="form-group">
                <label class="col-md-3 control-label">
                    <span class="requiredstar">*</span>分组：
                </label>
                <div class="col-md-5">
                    <input type="text" class="form-control" value="${groupInfo.name}" name='groupName' readonly required id="groupName"/>
                </div>
                <#if !(groupInfo.id > 0)>
                <label class="col-md-3 control-label text-left"><a onclick="setGroup();" class="btn btn-success btn-icon btn-circle"><i class="fa fa-gear"></i></a>选择分组</label>
            </#if>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label">
            <span class="requiredstar">* </span>
            卡券名称：
        </label>
        <div class="col-md-5">
            <input type="text" class="form-control" name='name' rangelength="1,50" value="${couponInfo.name}" required id="name"
                   placeholder="卡券名称 1-50位"/>
        </div>
        <label class="col-md-3 control-label" style="color: red;">名称不能包含 & < > " ' 5种特殊符号</label>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label">
            <span class="requiredstar">*</span>
            有效期：
        </label>
        <div class="col-md-2 m-r-10">
            <input type="text" class="form-control" id="beginTime" name="beginTime" autocomplete="off" value="${couponInfo.beginTime}"
                   required
                   placeholder="起始时间">
        </div>
        <div style="margin-top: 8px;float: left;margin-right:10px;">
            至
        </div>
        <div class="col-md-2 m-r-10">
            <input type="text" class="form-control" id="endTime" name="endTime" autocomplete="off" value="${couponInfo.endTime}" required
                   placeholder="结束时间">
        </div>
    </div>
    <div id="prestore-private" class="<#if (groupInfo.type != 'P')>hide<#else>show</#if>">
        <div id="inRuleDiv" class="form-group">
            <label class="col-md-3 control-label"><span class="requiredstar">*</span>预存规则：</label>
            <input id="inRule" name="inRule" type="hidden" value="">
            <div class="col-md-1" id="addInRuleBtn">
                <a id="addInRule" class="btn btn-success btn-icon btn-circle" onclick="javascript:addInRuleDiv();" title="添加"><i class="fa fa-plus"></i></a>
            </div>
            <div class="form-group"></div>
            <div class="form-group inRuleItem">
                <label class="col-md-3 control-label"></label>
                <div class="col-md-5">
                    <div class="input-group input-daterange">
                        <input type="text" class="form-control prestoreAmount" autocomplete="off" name="prestoreAmount" placeholder="预存金额，单位：元">
                        <span class="input-group-addon">升至</span>
                        <input type="text" class="form-control targetAmount" autocomplete="off" name="targetAmount" placeholder="目标金额，单位：元">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="coupon-private" class="<#if (groupInfo.type != 'C')>hide<#else>show</#if>">
        <div class="form-group">
            <label class="col-md-3 control-label"><span class="requiredstar">*</span>卡券面额：</label>
            <div class="col-md-2  m-r-10">
                <input type="text" class="form-control" id="money" name="money" value="${couponInfo.money}" required placeholder="卡券面额">
            </div>
            <label class="col-md-3 control-label"><span class="fl">单位：元</span></label>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">满多少可用：</label>
            <div class="col-md-2  m-r-10">
                <input type="text" class="form-control" id="outRule" name="outRule" value="${couponInfo.outRule}" required placeholder="满多少可用">
            </div>
            <label class="col-md-3 control-label"><span class="fl">单位：元，输入0或不输入表示无门槛</span></label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label"><span class="requiredstar">*</span>发放数量：</label>
        <div class="col-md-2  m-r-10">
            <span class="">${groupInfo.total} x </span>
            <input style="display:inline;padding: 0px;width:80px;text-align: center;" type="text" class="form-control" oninput="value=value.replace(/[^\d]/g,'')" id="sendNum" name="sendNum" value="${couponInfo.sendNum}" required placeholder="发放数量">
        </div>
        <label class="control-label">
            <span class="fl">（举例：配置为1000 x 3，则该卡券可发放1000套，每发1套时将该卡券将一次性发出3张）</span>
        </label>
    </div>
    <div id="priceOperatorDiv" class="form-group">
        <label class="col-md-3 control-label">不可用日期：</label>
        <div style="margin-top:7px;float:left;" class="col-md-2 m-r-10">
            <input type="checkbox" id="exceptWeekend" name="exceptWeekend" <#if couponInfo.exceptTime?index_of("weekend") != -1>checked</#if> value="1"/>周末&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="otherExceptTime" name="other" <#if exceptTimeList?size gt 0>checked</#if> value="1"/>其他
            <input type="hidden" id="exceptTime" name="exceptTime" value="${couponInfo.exceptTime}"/>
        </div>
        <div class="col-md-1" id="addPriceBtn" <#if exceptTimeList?size lt 1>style="display:none;"</#if>>
            <a id="addPrice" class="btn btn-success btn-icon btn-circle" onclick="javascript:addTimeDiv(false);" title="添加"><i class="fa fa-plus"></i></a>
        </div>
        <div class="form-group"></div>
        <#if exceptTimeList?exists && exceptTimeList?size gt 0>
        <#list exceptTimeList as ct>
        <div class="form-group otherTime">
            <label class="col-md-3 control-label"></label>
            <div class="col-md-5">
                <div class="input-group input-daterange">
                    <input type="text" class="startTime form-control" value="${ct.startDate}" disabled onfocus="selectTime(1);" name="startTime" placeholder="起始时间">
                    <span class="input-group-addon">至</span><input  value="${ct.endDate}"type="text" disabled class="finishTime form-control" onfocus="selectTime(2);" name="finishTime" placeholder="终止时间">
                </div>
            </div>
            <div class="col-md-1"></div>
        </div>
        </#list>
        </#if>
    </div>
    <div class="form-group">
        <label class="control-label col-md-3">
            适用店铺：
        </label>
        <div class="col-md-5" id="storeName">
            <#if couponInfo.storeIds?exists>
            <#list storeList as storeInfo>
            <span class="label label-info f-s-14 m-t-5" style="display: inline-block;margin-right:5px;">${storeInfo.name}</span>
            </#list>
                <input id="storeIds" name="storeIds" type="hidden" value="${couponInfo.storeIds}">
            <#else>
                <span class="label label-info f-s-14 m-t-5" style="display: inline-block;">全部店铺</span>
            </#if>
        </div>
        <div class="col-md-2">
            <a class="btn btn-success btn-icon btn-circle" onclick="setStore();" title="设置店铺"><i class="fa fa-gear"></i></a>设置店铺
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label">图标：</label>
        <div style="float: left;padding:2px;" class="m-r-6 m-b-5 m-l-10 clear">
            <img name="image1" class="m-r-20 m-b-10" id="image1" src="${baseImage}${couponInfo.image}" style="border:1px solid #ccc;border-radius:5px;width:80px;height:63px;">
            <div>
                <input type="file" name="picture1" id="picture1" style="display: inline-block" onchange="ajaxFileUpload(1,'${rc.contextPath}/backend');">
            </div>
            <div class="m-t-10">
                <input type="text" type="hidden" placeholder="图片路径" class="form-control" name="image" id="filePath1" value="${couponInfo.image}"
                       style="width:400px" onchange="changeImagePath('<@mh.static/>', '1')">
            </div>
            <div class="m-t-10"><span> 格式：</span>
                jpeg/jpg/png
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label"><span class="requiredstar">*</span>描述信息：</label>
        <div class="col-md-5">
             <textarea rows="8" class="form-control" id="description" name="description" maxlength="500" required placeholder="输入卡券介绍，使用范围等等...">${couponInfo.description}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label">后台备注：</label>
        <div class="col-md-5">
            <textarea rows="3" class="form-control" id="remarks" name="remarks" maxlength="500" placeholder="输入后台备注信息">${couponInfo.remarks}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label"></label>
        <div class="col-md-6">
            <button type="button" id="submitButton" class="btn btn-sm btn-danger">确认</button>
            <button type="button" onclick="returnBack();" class="btn btn-sm btn-success">返回</button>
        </div>
    </div>
    </form>
</div>
</div>
<script type="application/javascript">

    $(function () {
        // 设置不可用时间
        $("#addPriceBtn").hide();
        $("#otherExceptTime").change(function() {
            var checked = $(this).attr("checked");
            if (checked == "checked") {
                $("#addPriceBtn").show();
                $(".otherTime").show();
                var len = $(".otherTime").length;
                if (len < 1) {
                    addTimeDiv(true);
                }
            } else {
                $("#addPriceBtn").hide();
                $(".otherTime").hide();
            }
        });

        $('#beginTime').datetimepicker({
            lang: "ch",
            format: "Y-m-d H:i",   //日期格式,选择时间时 格式位Y-m-d H:i
            timepicker: true, //是否选择时间
            yearStart: 2000,
            yearEnd: 2050,
            todayButton: true,  //是否显示今天按钮,
            minDate: new Date() //最小选择日期
        });
        $('#endTime').datetimepicker({
            lang: "ch",
            format: "Y-m-d H:i",
            timepicker: true,
            yearStart: 2000,
            yearEnd: 2050,
            todayButton: true,
            minDate: new Date() //最小选择日期
        });

        $('#submitButton').click(function () {
            var groupId = $("#groupId").val();
            if ($.isBlank(groupId)) {
                layer.alert("请先选择分组哦~");
                $("#groupName").focus();
                return;
            }
            var name = $("#name").val();
            if ($.isBlank(name)) {
                layer.alert("卡券名称不能为空哦~");
                $("#name").focus();
                return;
            }
            if (!$.isBlank(name)) {
                if (name.indexOf("&") >= 0 || name.indexOf("<") >= 0 || name.indexOf(">") >= 0 || name.indexOf("\"") >= 0 || name.indexOf("'") >= 0) {
                    layer.alert("卡券名称不能包含 & < > \" ' 特殊符号");
                    $("#name").focus();
                    return;
                }
            }

            if ($("#exceptWeekend").attr("checked") == "checked") {
                $("#exceptTime").val('weekend');
            } else {
                $("#exceptTime").val('');
            }

            // 预存规则
            if ($("#type").val() == 'P') {
                var inRule = "";
                var inRuleError = 0;
                $('.inRuleItem').each(function () {
                    var prestoreAmount = $(this).find('.prestoreAmount', 0).val();
                    var targetAmount = $(this).find('.targetAmount', 0).val();
                    if (parseInt(targetAmount) < parseInt(prestoreAmount)) {
                        inRuleError = 1;
                    }
                    if (targetAmount.length < 1 || prestoreAmount.length < 1) {
                        inRuleError = 2;
                    }
                    var ruleItem = prestoreAmount + "_" + targetAmount;
                    inRule = (inRule.length > 0) ? inRule + ',' + ruleItem : ruleItem;
                });

                if (inRuleError == 1) {
                    layer.alert("预存金额不能小于目标金额哦~");
                    return;
                }
                if (inRuleError == 2) {
                    layer.alert("请填写完整的预存规则哦~");
                    return;
                }

                $("#inRule").val(inRule);
            }

            // 不可用时间
            var checkOther = $("#otherExceptTime").attr("checked");
            if (checkOther == "checked") {
                var time = '';
                var dateError = false;
                var dateError1 = false;
                $('.otherTime').each(function() {
                    var start = $(this).find('.startTime', 0).val()+'_'+$(this).find('.finishTime', 0).val();
                    time = (time.length > 0) ? time+','+start : start;
                    var d1 = $(this).find('.startTime', 0).val();
                    var d2 = $(this).find('.finishTime', 0).val();
                    var startTime = Date.parse(d1);
                    var endTime = Date.parse(d2);
                    if (startTime >= endTime) {
                        dateError = true;
                    }
                    var finishDate = Date.parse($("#endTime").val());
                    var beginDate = Date.parse($("#beginTime").val());
                    if (startTime > finishDate || endTime < beginDate) {
                        dateError1 = true;
                    }
                });

                if (dateError) {
                    layer.alert("不可用日期开始时间必须早于结束时间哦~");
                    return;
                }

                if (dateError1) {
                    layer.alert("不可用日期不在券有效期内哦~");
                    return;
                }

                if ($("#exceptWeekend").attr("checked") == "checked") {
                    if (time.length > 2) {
                        $("#exceptTime").val('weekend,'+time);
                    } else {
                        $("#exceptTime").val('weekend');
                    }
                } else if(time.length > 2){
                    $("#exceptTime").val(time);
                }

                if ($("#exceptTime").val().length <= 8) {
                    layer.alert("不可用日期是必填项哦~");
                    return;
                }
            }

            $('#activityForm').submit();
        });

        $('#activityForm').validate({
            submitHandler: function () {
                postDataByForm('${rc.contextPath}/backend/coupon/update', 'displayArea', 'activityForm');
                $.close();
            }
        })
    });

    function returnBack() {
        getData('${rc.contextPath}/backend/coupon/index?EQ_groupId=${groupId}', 'displayArea');
    }

    /**
     * 设置分组
     * @param name
     */
    function setGroup() {
        alterpage('${rc.contextPath}/backend/couponGroup/quickSearchInit', "选择分组");
    }

    /**
     * 设置店铺
     * @param name
     */
    function setStore() {
        alterpage('${rc.contextPath}/backend/coupon/searchStore', "设置适用店铺");
    }

    /**
     * 添加预存规则
     */
    function addInRuleDiv() {
        var deleteBtn = "<div class='col-md-1 deleteInRule'>"+
            "<a class='btn btn-danger btn-icon btn-circle' onclick='javascript:deleteInRuleDiv(this);' title='删除'><i class='fa fa-times'></i></a>"+
            "</div>";
        var inRuleDiv = "<div class='form-group inRuleItem'>"+$('.inRuleItem').eq(0).html()+ deleteBtn +"</div>";

        $("#inRuleDiv").append(inRuleDiv);
    }

    /**
     * 删除预存规则
     */
    function deleteInRuleDiv(obj) {
        $(obj).parent().parent().remove();
    }

    /**
     * 添加例外时间
     */
    function addTimeDiv(isFirst) {
        var priceDiv = "<div class='form-group otherTime'>" +
            "<label class='col-md-3 control-label'></label>" +
            "<div class='col-md-5'>" +
            "<div class='input-group input-daterange'>" +
            "<input type='text' class='startTime form-control' onfocus='selectTime(1);' autocomplete='off' name='startTime' placeholder='起始时间'/>" +
            "<span class='input-group-addon'>至</span>" +
            "<input type='text' class='finishTime form-control' onfocus='selectTime(2);' autocomplete='off' name='finishTime' placeholder='终止时间'/>" +
            "</div>" +
            "</div>" +
            "<div class='col-md-1'>" +
            "<a id='deletePrice' class='btn btn-danger btn-icon btn-circle'" +
            "onclick='javascript:deleteTimeDiv(this);' title='删除'><i class='fa fa-times'></i></a>" +
            "</div>" +
            "</div>";

        if (isFirst == true) {
            priceDiv = "<div class='form-group otherTime'>" +
                "<label class='col-md-3 control-label'></label>" +
                "<div class='col-md-5'>" +
                "<div class='input-group input-daterange'>" +
                "<input type='text' class='startTime form-control' onfocus='selectTime(1);' autocomplete='off' name='startTime' placeholder='起始时间'/>" +
                "<span class='input-group-addon'>至</span>" +
                "<input type='text' class='finishTime form-control' onfocus='selectTime(2);' autocomplete='off' name='finishTime' placeholder='终止时间'/>" +
                "</div>" +
                "</div>" +
                "<div class='col-md-1'>" +
                "</div>" +
                "</div>";
        }

        $("#priceOperatorDiv").append(priceDiv);
    }

    /**
     * 删除例外时间
     */
    function deleteTimeDiv(obj) {
        $(obj).parent().parent().remove();
    }

    function selectTime(type) {
        if (type == 1) {
            $('.startTime').datetimepicker({
                lang: "ch",
                format: "Y-m-d H:i",   //日期格式,选择时间时 格式位Y-m-d H:i
                timepicker: true, //是否选择时间
                yearStart: 2000,
                yearEnd: 2050,
                todayButton: true,  //是否显示今天按钮,
                minDate: new Date() //最小选择日期
            });
        } else {
            $('.finishTime').datetimepicker({
                lang: "ch",
                format: "Y-m-d H:i",
                timepicker: true,
                yearStart: 2000,
                yearEnd: 2050,
                todayButton: true,
                minDate: new Date() //最小选择日期
            });
        }
    }
</script>
